<template>
  <div id="app">
    <TodoInput
      :list="list"
      @listAdd="listAdd"
      :isAllSelect="isAllSelect"
      @isAllSelect="isAllSelectClick"
    />
    <TodoList
      :list="showList"
      @checkChange="checkChange"
      @deleteItem="deleteItem"
      @handleChange="handleChange"
    />
    <TodoNav @selectList="selectList" :active="active" />
  </div>
</template>

<script>
import TodoInput from "@/components/TodoInput.vue";
import TodoList from "@/components/TodoList.vue";
import TodoNav from "@/components/TodoNav.vue";

export default {
  name: "App",
  components: {
    TodoInput,
    TodoList,
    TodoNav,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          isDone: true,
          text: "我的",
        },
        {
          id: 2,
          isDone: false,
          text: "睡觉",
        },
      ],
      showList: [],
      active: "全部",
    };
  },
  watch: {
    list: {
      handler(val) {
        localStorage.setItem("list", JSON.stringify(val));
        this.selectList(false, true);
      },
      deep: true,
    },
  },
  created() {
    this.list = JSON.parse(localStorage.getItem("list"))
      ? JSON.parse(localStorage.getItem("list"))
      : [];
    this.showList = [...this.list];
  },
  computed: {
    isAllSelect() {
      return this.list.every((item) => item.isDone);
    },
  },
  methods: {
    handleChange(all) {
      this.list = this.list.map((item) => {
        if (item.id == all.id) item.text = all.text;
        return item;
      });
    },
    selectList(e, how) {
      let more = false;
      let text = e ? e.target.textContent.trim() : this.active;
      switch (text) {
        case "全部":
          this.showList = [...this.list];
          break;
        case "未完成":
          this.showList = this.list.filter((item) => !item.isDone);
          break;
        case "已完成":
          this.showList = this.list.filter((item) => item.isDone);
          break;
        case "清空已完成":
          if (!how) {
            this.showList = this.list.filter((item) => !item.isDone);
            this.list = this.showList;
          }
          this.active = "全部";
          more = true;
          break;
      }
      if (more) return;
      this.active = text;
    },
    checkChange(cat) {
      this.list = this.list.map((item) => {
        if (item.id == cat.id) item.isDone = cat.isDone;
        return item;
      });
    },
    listAdd(text) {
      if (!text) return;
      let item = {
        id: Date.now(),
        isDone: false,
        text,
      };
      this.list = [...this.list, item];
    },
    deleteItem(id) {
      this.list = this.list.filter((item) => item.id != id);
    },
    isAllSelectClick({ checked }) {
      this.list = this.list.map((item) => ({ ...item, isDone: checked }));
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
